<template>
    <div class="monitoring-container">
        <div v-if="!isShow" class="monitoring">
            <div class="content-title">
                <dv-decoration-10 style="width:35%;height:5px;" />
                <dv-decoration-5 style="width:30%px;height:40px;" />
                <dv-decoration-10 class="line-reverse" style="width:35%;height:5px;" />
                <div class="title-box">
                    <div style="float:left" class="time-box">{{date}}</div>
                    <div class="return-button" @click="returnBack">
                        <div>返回</div>
                    </div>
                    <div style="float: right" class="time-box">{{date}}</div>
                    <div class="title-box-name">东方通可视化平台</div>
                    <dv-decoration-3 style="width:250px;height:30px;margin: 0 auto;" />
                </div>
            </div>
            <div class="content-top">
                <div class="node-link">
                    <dv-border-box-12>dv-border-box-12</dv-border-box-12>
                </div>
                <div class="data-info">
                    <div class="data-info-small" v-for="(item, index) in info" :key="index">
                        <p class="name">{{item.title}}</p>
                        <p class="num">{{item.num}}</p>
                    </div>
                    <div class="data-info-meter">
                        <div>
                            <span>拉取速率</span>
                            <div class>60bps/s</div>
                        </div>
                        <div>
                            <span>推送速率</span>
                            <div>40bps/s</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-bottom" v-if="show">
                <dv-border-box-12>
                    <div class="content-bottom-box" v-for="(item, index) in list" :key="index">
                        <div class="node-name">{{item.node_name}}{{index}}</div>
                        <div class="node-num">
                            <span>消息堆积数</span>
                            <div>{{item.node_num*index}}</div>
                        </div>
                    </div>
                </dv-border-box-12>
            </div>
        </div>
        <div v-else class="modal">
            <dv-loading>Loading...</dv-loading>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: true,
            show: true,
            date: new Date().toLocaleString(),
            info: [
                { title: '消息总数', num: '120' },
                { title: '客户端应用生产/消费', num: '18' },
                { title: '工作节点总数', num: '2' },
                { title: '最近一个月消息数量', num: '106' },
                { title: '最近一周消息数量', num: '100' },
                { title: '最近一天消息数量', num: '14' }
            ],
            //模拟节点列表数据
            list: [
                {
                    node_name: 'master',
                    node_num: 12,
                    node_list: [
                        {
                            cpu: [100, 60, 75, 15, 60],
                            disk: [100, 60, 75, 15, 60],
                            mmemoryem: [100, 60, 75, 15, 60],
                            network: [100, 60, 75, 15, 60]
                        }
                    ]
                },
                {
                    node_name: 'master',
                    node_num: 12,
                    node_list: [
                        {
                            cpu: [100, 60, 75, 15, 60],
                            disk: [100, 60, 75, 15, 60],
                            mmemoryem: [100, 60, 75, 15, 60],
                            network: [100, 60, 75, 15, 60]
                        }
                    ]
                },
                {
                    node_name: 'master',
                    node_num: 12,
                    node_list: [
                        {
                            cpu: [100, 60, 75, 15, 60],
                            disk: [100, 60, 75, 15, 60],
                            mmemoryem: [100, 60, 75, 15, 60],
                            network: [100, 60, 75, 15, 60]
                        }
                    ]
                },
                {
                    node_name: 'master',
                    node_num: 12,
                    node_list: [
                        {
                            cpu: [100, 60, 75, 15, 60],
                            disk: [100, 60, 75, 15, 60],
                            mmemoryem: [100, 60, 75, 15, 60],
                            network: [100, 60, 75, 15, 60]
                        }
                    ]
                },
                {
                    node_name: 'master',
                    node_num: 12,
                    node_list: [
                        {
                            cpu: [100, 60, 75, 15, 60],
                            disk: [100, 60, 75, 15, 60],
                            mmemoryem: [100, 60, 75, 15, 60],
                            network: [100, 60, 75, 15, 60]
                        }
                    ]
                }
            ]
        };
    },
    //判断query,primary为首页跳转,不显示下方节点列表,其他为跳转,显示下方节点列表
    created() {
        this.show = this.$route.query.plan == 'primary' ? false : true;
    },
    //定时器模拟请求数据,loading加载动画
    mounted() {
        setTimeout(() => {
            this.isShow = false;
        }, 1000);
    },
    methods: {
        //返回上一页
        returnBack() {
            this.$router.go(-1);
        }
    }
};
</script>

<style scoped>
.monitoring {
    width: 100vw;
    height: 100vh;
    background: url('../assets/image/pageBg.png') no-repeat;
    background-size: 100% 100%;
}
.modal {
    width: 100vw;
    height: 100vh;
    background-color: #eee;
}
.content-title {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}
.line-reverse {
    transform: rotateY(180deg);
}
.content-top {
    width: 100%;
    height: 300px;
    display: flex;
    margin-top: 50px;
}
.node-link {
    width: 65%;
}
.data-info {
    width: 35%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.content-bottom {
    margin-top: 20px;
    width: 100%;
    height: 300px;
    overflow: scroll;
}
.content-bottom-box {
    width: 98%;
    height: 300px;
    display: flex;
    align-items: center;
    background: rgba(125, 125, 125, 0.1);
    margin: 1% auto;
}

.content-bottom-box .node-name {
    text-align: center;
    width: 10%;
    color: white;
}
.content-bottom-box .node-num {
    width: 10%;
    height: 200px;
    background-color: #141619;
    position: relative;
    text-align: center;
    font-size: 12px;
    color: white;
    padding: 15px;
    box-sizing: border-box;
}
.content-bottom-box .node-num > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 25px;
}
.content-bottom-box .node-info {
    width: 80%;
    background: #3de7ca;
}
.title-box {
    width: 100%;
    position: fixed;
    top: 40px;
    text-align: center;
    box-sizing: border-box;
}
.title-box-name {
    color: white;
    font-size: 20px;
    font-weight: 900;
}
.data-info-small {
    width: 32.5%;
    height: 80px;
    border-radius: 5px;
    background: #0e1325;
    padding: 8px;
    box-sizing: border-box;
}
.return-button {
    float: left;
    transform: skewX(45deg);
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #1a5cd7;
    background: #0e1325;
    margin-left: 20px;
    cursor: pointer;
}
.return-button > div {
    transform: skewX(-45deg);
}
.data-info-small .name {
    color: #1a5cd7;
    font-size: 12px;
}
.data-info-small .num {
    font-size: 24px;
    color: #3de7ca;
}
.time-box {
    width: 250px;
    height: 40px;
    line-height: 40px;
    color: white;
    background: #0f1325;
    /* position: absolute;
    top: 50%;
    transform: translate(0, -50%); */
}
.data-info-meter {
    width: 100%;
    height: 120px;
    border-radius: 5px;
    background: #0e1325;
    display: flex;
}
.data-info-meter > div {
    width: 50%;
    height: 120px;
    border-radius: 5px;
    text-align: center;
    color: white;
    font-size: 12px;
    padding: 8px;
    box-sizing: border-box;
}
</style>